<template>
  <div id="SoundEqData">
    <div class="SoundEq1">
      <div class="SoundEq1Title">气囊组件</div>
      <a-table :columns="columns" :data-source="data" :pagination="false">
        <a slot="name" slot-scope="text">{{ text }}</a>
        <span slot="customTitle"><a-icon type="smile-o" /> Name</span>
        <span slot="tags" slot-scope="tags">
          <a-tag
            v-for="tag in tags"
            :key="tag"
            :color="
              tag === 'loser'
                ? 'volcano'
                : tag.length > 5
                ? 'geekblue'
                : 'green'
            "
          >
            {{ tag.toUpperCase() }}
          </a-tag>
        </span>
      </a-table>
    </div>
    <div class="SoundEq2">
      <div class="SoundEq2Title">位移</div>
    </div>
    <div class="SoundEq3">
      <div class="SoundEq3_a">
        <div class="SoundEq3ATitle">其他数据</div>
      </div>
      <div class="SoundEq3_b">
        <div class="SoundEq3BTitle">纵角</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        {
          dataIndex: "name",
          key: "name",
          slots: { title: "customTitle" },
          scopedSlots: { customRender: "name" },
        },
        {
          title: "Age",
          dataIndex: "age",
          key: "age",
        },
        {
          title: "Address",
          dataIndex: "address",
          key: "address",
        },
        {
          title: "Tags",
          key: "tags",
          dataIndex: "tags",
          scopedSlots: { customRender: "tags" },
        },
      ],
      data: [
        {
          key: "1",
          name: "John Brown",
          age: 32,
          address: "New York No. 1 Lake Park",
          tags: ["nice", "developer"],
        },
        {
          key: "2",
          name: "Jim Green",
          age: 42,
          address: "London No. 1 Lake Park",
          tags: ["loser"],
        },
        {
          key: "3",
          name: "Joe Black",
          age: 32,
          address: "Sidney No. 1 Lake Park",
          tags: ["cool", "teacher"],
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
#SoundEqData {
  display: flex;
  justify-content: space-around;
  .SoundEq1 {
    width: 970px;
    height: 740px;
    margin-top: 10px;
    position: relative;
    background-image: url("~@/assets/img/SoundEq1.png");
    background-size: contain;
    /* 背景图缩放以完整显示 */
    background-repeat: no-repeat;
    /* 防止背景图重复 */
    background-position: center;

    /* 将背景图居中显示 */
    .SoundEq1Title {
      position: absolute;
      left: 46%;
      font-size: 22px;
      color: white;
      font-family: "KaiTi", "楷体", serif;
    }
  }

  .SoundEq2 {
    width: 360px;
    height: 740px;
    margin-top: 10px;
    position: relative;
    background-image: url("~@/assets/img/SoundEq2.png");
    background-size: contain;
    /* 背景图缩放以完整显示 */
    background-repeat: no-repeat;
    /* 防止背景图重复 */
    background-position: center;

    /* 将背景图居中显示 */
    .SoundEq2Title {
      position: absolute;
      left: 45%;
      font-size: 22px;
      color: white;
      font-family: "KaiTi", "楷体", serif;
    }
  }

  .SoundEq3 {
    margin-top: 10px;

    .SoundEq3_a {
      width: 360px;
      height: 580px;
      background-image: url("~@/assets/img/SoundEq3_a.png");
      background-size: contain;
      /* 背景图缩放以完整显示 */
      background-repeat: no-repeat;
      /* 防止背景图重复 */
      background-position: center;
      /* 将背景图居中显示 */
      position: relative;

      .SoundEq3ATitle {
        position: absolute;
        left: 38%;
        font-size: 22px;
        color: white;
        font-family: "KaiTi", "楷体", serif;
      }
    }

    .SoundEq3_b {
      width: 360px;
      height: 160px;
      background: url("~@/assets/img/SoundEq3_b.png");
      background-size: contain;
      /* 背景图缩放以完整显示 */
      background-repeat: no-repeat;
      /* 防止背景图重复 */
      background-position: center;
      /* 将背景图居中显示 */
      position: relative;

      .SoundEq3BTitle {
        position: absolute;
        left: 45%;
        font-size: 22px;
        color: white;
        font-family: "KaiTi", "楷体", serif;
      }
    }
  }
}
</style>
<style lang="scss">
#SoundEqData {
  .ant-table-wrapper {
    width: 90%;
    position: absolute;
    top: 5%;
    left: 5%;
  }

  .ant-table-thead {
    th {
      background: #0e344e !important;
      color: white !important;
    }
  }

  .ant-table-body,
  .ant-table-placeholder {
    min-height: 680px;
    /* 设置表格的最小高度 */
    background: #0e344e !important;
    overflow-y: auto !important;
  }
  .ant-table-placeholder{
    height: 300px !important;
    min-height: 300px !important;
    border-bottom: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 8%;
  }
}
</style>